@extends('admin.common.framework') 
@section('heads')
<link rel="stylesheet" href="{{ env('APP_STATIC') }}vendor/cropper/dist/cropper.min.css">
<style>
    img {
        max-width: 100%;
        /* This rule is very important, please do not ignore this! */
    }
</style>
@endsection
 
@section('content')
<div class="row">
    <div class="col-lg-12">
        <h3 class="page-header" style="display:inline-block;">图集管理</h3>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div>
    <span style="display:inline-block;"><h4>图片列表</h4></span>
    <span class="fa fa-fw fa-plus-circle fa-action album-add-span" style="display:inline-block; font-size:18px;" data-toggle="modal" data-target="#album-add-modal"></span>
</div>
<div class="row">
    @foreach( $list as $li )
    <div class="col-lg-3 col-md-6 slider-card" id="album-{{$li['id']}}">
        <div class="panel">
            <div class="panel-heading @if($li['status'] == 0) panel-opacity @endif">
                <div class="row slider-img-card" style="background-image: url('{{env("APP_UPLOAD").$li["pic"]}}'); height:150px;">
                    <div class="col-xs-3">
                    </div>
                    <div class="col-xs-9 text-right">
                        <div>
                            <h5>{{$li['title']}}</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <span class="pull-left fa fa-fw fa-edit fa-action album-edit-span" data-toggle="modal" data-target="#album-edit-modal"
                    data-type="{{$li['type']}}" data-id="{{$li['id']}}" data-title="{{$li['title']}}" data-pic="{{env('APP_UPLOAD').$li['pic']}}"
                    data-description="{{$li['description']}}" data-status="{{$li['status']}}" data-rank="{{$li['rank']}}" data-path="{{$li['pic']}}"></span>
                <span class="pull-right fa fa-close fa-fw fa-action album-delete-span" data-id="{{$li['id']}}"></span>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    @endforeach
</div>
<div class="row" style="text-align:center;">
    {{$list->appends($params)->links()}}
</div>
<div>
    <!-- Modal -->
    <div class="modal fade" id="album-add-modal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModalLabel">图片添加</h4>
                </div>
                <div class="modal-body" style="padding:30px;">
                    <div class="row">
                        <div class="col-lg-12">
                            <form role="form" id="album-add-form" enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <input type="hidden" name="path" value="">
                                <input type="hidden" name="crop" value="">
                                <div class="form-group">
                                    <label>标题</label>
                                    <input class="form-control" name="title" type="text">
                                </div>
                                <div class="form-group">
                                    <label>描述</label>
                                    <input class="form-control" name="description" type="text">
                                </div>
                                <div class="form-group">
                                    <label>排序</label>
                                    <input class="form-control" name="rank" type="number" value="0">
                                </div>
                                <div class="form-group">
                                    <label style="margin-right:25px;">显示</label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="status-1" value="1" checked>显示
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="status-0" value="0">隐藏
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label style="margin-right:25px;">上传</label>
                                    <label class="radio-inline">
                                        <input type="radio" name="up" value="1" checked>裁剪图
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="up" value="0">原图
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>图片</label>
                                    <input name="img" type="file" accept="image/gif,image/jpeg,image/png">
                                </div>
                                <div class="form-group form-origin" style="display:none;">
                                    <label>原图</label>
                                    <img src="" alt="" title="" id="origin-img">
                                </div>
                                <div class="form-group form-cropper row" style="display:none;">
                                    <label>裁剪比</label>
                                    <input class="form-control" name="aspect_ratio" type="text" value="16/9">
                                </div>
                                <div class="form-group form-preview" style="display:none;">
                                    <label>预览</label>
                                    <div class="img-preview preview-lg"></div>
                                </div>
                                <div class="form-group form-cropper" style="display:none;">
                                    <label>裁剪</label>
                                    <img src="" alt="" id="image" style="display:none;">
                                </div>
                                <div class="form-group form-cropper-control form-cropper" style="display:none;">
                                    <button type="button" class="btn btn-primary btn-circle" onclick="cropimg.cropper('zoom',0.1)"><i class="fa fa-search-plus" ></i>
                                        </button>
                                    <button type="button" class="btn btn-primary btn-circle" onclick="cropimg.cropper('zoom',-0.1)"><i class="fa fa-search-minus" ></i>
                                        </button> &nbsp;&nbsp;
                                    <button type="button" class="btn btn-info btn-circle" onclick="cropimg.cropper('move',-10,0)"><i class="fa fa-arrow-left" ></i>
                                        </button>
                                    <button type="button" class="btn btn-info btn-circle" onclick="cropimg.cropper('move',10,0)"><i class="fa fa-arrow-right" ></i>
                                        </button>
                                    <button type="button" class="btn btn-info btn-circle" onclick="cropimg.cropper('move',0,-10)"><i class="fa fa-arrow-up" ></i>
                                        </button>
                                    <button type="button" class="btn btn-info btn-circle" onclick="cropimg.cropper('move',0,10)"><i class="fa fa-arrow-down" ></i>
                                        </button> &nbsp;&nbsp;
                                    <button type="button" class="btn btn-success btn-circle" onclick="cropimg.cropper('rotate',-5)"><i class="fa fa-rotate-left" ></i>
                                        </button>
                                    <button type="button" class="btn btn-success btn-circle" onclick="cropimg.cropper('rotate',5)"><i class="fa fa-rotate-right" ></i>
                                        </button> &nbsp;&nbsp;
                                    <button type="button" class="btn btn-warning btn-circle" onclick="scaleX *= -1;cropimg.cropper('scaleX',scaleX)"><i class="fa fa-arrows-h" ></i>
                                        </button>
                                    <button type="button" class="btn btn-warning btn-circle" onclick="scaleY *= -1;;cropimg.cropper('scaleY',scaleY)"><i class="fa fa-arrows-v" ></i>
                                        </button> &nbsp;&nbsp;
                                    <button type="button" class="btn btn-danger btn-circle" onclick="cropimg.cropper('reset')"><i class="fa fa-refresh"></i>
                                        </button>
                                    <button type="button" class="btn btn-success btn-circle" onclick="fnReCropper()"><i class="fa fa-refresh"></i>
                                        </button>
                                </div>
                            </form>
                        </div>
                        <!-- /.col-lg-6 (nested) -->
                        <!-- /.col-lg-6 (nested) -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-warning" onclick="fnAddFormInit();">重置</button>
                    <button type="reset" class="btn btn-default" data-dismiss="modal" id="album-add-reset" onclick="fnAddFormInit();">关闭</button>
                    <button type="button" class="btn btn-primary submit" id="album-add-submit">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="album-edit-modal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editModalLabel">图片编辑</h4>
                </div>
                <div class="modal-body" style="padding:30px;">
                    <div class="row">
                        <div class="col-lg-12">
                            <form role="form" id="album-edit-form">
                                {{ csrf_field() }}
                                <input type="hidden" name="id" value="">
                                <div class="form-group">
                                    <label>标题</label>
                                    <input class="form-control" name="title" type="text">
                                </div>
                                <div class="form-group">
                                    <label>描述</label>
                                    <input class="form-control" name="description" type="text">
                                </div>
                                <div class="form-group">
                                    <label>路径</label>
                                    <input class="form-control" name="path" type="text" disabled>
                                </div>
                                <div class="form-group">
                                    <label>排序</label>
                                    <input class="form-control" name="rank" type="number" value="0">
                                </div>
                                <div class="form-group">
                                    <label style="margin-right:25px;">显示</label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="status-1" value="1" checked>显示
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="status-0" value="0">隐藏
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>图片</label>
                                    <p>(欲修改请重新添加)</p>
                                    <img class="img" src="" alt="" title="">
                                </div>
                            </form>
                        </div>
                        <!-- /.col-lg-6 (nested) -->
                        <!-- /.col-lg-6 (nested) -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal" id="album-edit-reset">关闭</button>
                    <button type="button" class="btn btn-primary submit" id="album-edit-submit">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
 
@section('scripts')
<script src="{{ env('APP_STATIC') }}vendor/cropper/dist/cropper.min.js"></script>
<script src="{{ env('APP_STATIC') }}admin/js/album.js"></script>
@endsection